<template>
	<div @keyup.enter="setData()" @click.self='reset()' class="modal pswdModal-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<h4 class="modal-title" id="myModalLabel">设置密码安全策略</h4>
					<span class="close" style="color: #fff "  @click='reset()' data-dismiss="modal" aria-hidden="true">&times;</span>
				</div>
				<div class="modal-body">
					<!--请求-->
					<div class="result" v-if="result=='loading'">
						<div>
							<img src="../../../../img/loading.gif" />
							<p style="color: #444;">正在链接数据，请稍后……</p>
						</div>
					</div>
					<!--成功-->
					<div class="result" v-else-if="result=='success'">
						<div>
							<img src="../../../../img/success.png" />
							<span >{{$t('common.successNotice')}}</span>
						</div>
					</div>
					<!--失败-->
					<div class="modal-body result" v-else-if="result=='error'">					
						<div >
							<img src="../../../../img/cry.png" /><span>{{errorMsg}}</span>
						</div>
					</div>
					<table v-else>
						<thead>
							<tr><th colspan="2">密码安全策略</th></tr>
						</thead>
						<tbody>
							<tr>
								<td >安全密码格式必须为：</td>
								<td style="padding-right:20px;">
									<p>1、密码长度为8~15位字符</p> 
									<p>2、必须同时包含字母、数字中两者</p>
								</td>
							</tr>
							<tr>
								<td>
									<input type="checkbox" v-model="active" class="check" v-on:click="check()"/>
									<span>密码最长使用天数：</span>
								</td>
								<td>
									<input type="number" min="1" class="num" v-model="days"/>
									<div class="error num-msg" ></div>
								</td>
							</tr>
						</tbody>
					</table>
				</div>
				<div class="modal-footer">
				  <p class="notice" v-show='result=="error"'>*{{errorMsg}}</p>
					<button class="sure-btn button button--aylen" @click="setData()">确定</button>
					<button class="sure-btn button button--aylen" @click='reset()' data-dismiss="modal">关闭</button>					
				</div>
			</div>
		</div>
	</div>	
</template>
<script>
	import userservice from 'services/userService'
	export default {
		data() {
			return {
				active:"",
				days:"",
				oper:"",
				result:'',
				errorMsg:'sadas'
			}
		},
		mounted() {
			// this.getData()
		},
		methods: {
			reset() {
				this.result=''
				this.errorMsg=''
			},
			setData() {
				if (this.valiData()) {
					let conf = {}
					if (this.active) {
						conf = {
							oper:"update",
							is_active:this.active,
							conf_value:this.days,
						}
					} else {
						conf = {
							oper:"update",
							is_active:this.active,
							conf_value:"",
						}
					}
					this.result='loading'
					userservice.expire(conf)
						.then((res) => {
							if (res.errcode === 0) {
								this.result='success'
								let _this=this
								setTimeout(function() {
									$('.pswdModal-modal-lg').modal('hide')
									_this.reset()
								}, 1000)
							} else {
								this.result='error'
								this.errorMsg = res.errorMessage
							}
						})
				}
			},
			valiData() {
				$(".num-msg").text("")
				let reg = /^\+?[1-9][0-9]*$/
				if (this.active) {
					if (!reg.test(this.days)) {
						$(".num-msg").text("天数输入不正确")
						return false
					} else {
						return true
					}
				} else {
					return true
				}
			},
			check() {
				if (this.active) {
					$(".num").removeAttr("readonly").css("color","#000000")
				} else {
					$(".num").attr("readonly","true").css("color","#e6e6e6")
				}
			},
			getData() {
				let conf = {
					oper:"",
					conf_value:"",
					is_active:""
				}
				userservice.expire(conf)
        .then((res) => {
					if (res.errcode === 0) {
						this.active = res.data.is_active;
						this.days = res.data.conf_value;
          }
				})
			}
		}
	}
</script>
<style scoped lang="less">
  table tbody tr	td p{
		text-align: left;
		// padding-left: 10px;
	}
	span{
		vertical-align: middle;
		color:#444 !important;
	}
	.num{
		text-align: center;
		width: 50px;
		height: 20px;
		background: #e6e6e6;
		border-radius: 3px;
	}
	input[type="checkbox"]{
		width: 12px;
		height: 12px;
		margin-top: -1px;
	}
	.error{
		display: inline-block;
		padding-left: 50px;
		color: #ff4242 ;
		text-align: left;	
	}	
</style>